<template>
  <div>
    <div class="compass-box">
      <div class="compass">
        <div class="compass-circle">
          <img
            src="@/static/img/top/compass-circle.png"
          />
        </div>

        <img
          src="@/static/img/top/pointer.png"
          class="img-pointer"
          ref="pointer"
          :class="{ animation: isOpenAnimation && animationFlag }"
          :style="{
            transform: 'translate(-50%, -100%) rotate(' + rotate + 'deg)',
          }"
        />

        <compass-progress :percent="rate"></compass-progress>

        <span class="rate-text">{{ rate.toFixed(2) }}%</span>

        <div class="compass-numbers">
          <span v-for="n in numbers" :key="n">{{ n }}</span>
        </div>
      </div>

      <div class="text-center compass-info">
        <p class="compass-price">实际花费</p>
        <p class="compass-price-text">
          {{ spend }}
          <img
            src="@/static/img/top/gold.png"
            style="width: 16px; margin-left: 1px"
          />
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import CompassProgress from "./CompassProgress.vue";
import { upgradeAnimationDuraction } from "../index.vue";

export default defineComponent({
  setup(props) {
    const isOpenAnimation = ref(true);
    const deg = ref(0);
    const rotate = ref(0);
    const pointer = ref<HTMLDivElement | null>(null);

    const computedDegAndRotate = (point: number) => {
      const n = (point / 10000) * 360;
      deg.value = n;
      rotate.value = 360 * 10 + n;
    };

    watch(
      () => props.point,
      () => {
        const point = props.point;
        const element = pointer.value;
        if (!element) return;

        if (!point) {
          isOpenAnimation.value = false;
          getComputedStyle(element).transition;
          deg.value = 0;
          rotate.value = 0;
          return;
        }

        if (!props.animationFlag) {
          computedDegAndRotate(point);
          rotate.value = deg.value;
          return;
        }

        const resetRotate = () => {
          setTimeout(() => {
            isOpenAnimation.value = false;
            getComputedStyle(element).transition;
            rotate.value = deg.value;
          }, upgradeAnimationDuraction);
        };

        if (!isOpenAnimation.value) {
          isOpenAnimation.value = true;
          getComputedStyle(element).transition;
        }

        computedDegAndRotate(point);
        resetRotate();
      }
    );

    return {
      numbers: [10000, 1250, 2500, 3750, 6250, 7500, 8750],
      isOpenAnimation,
      deg,
      rotate,
      pointer,
    };
  },

  props: {
    rate: {
      type: Number,
      default: 0,
    },
    spend: {
      type: Number,
      default: 0,
    },
    point: {
      type: Number,
      default: 0,
    },
    animationFlag: {
      type: Boolean,
      default: true,
    },
  },

  components: {
    CompassProgress,
  },
});
</script>

<style scoped lang="scss">
.compass-box {
  margin: 75px 75px 0 75px;
  display: flex;
  flex-direction: column;

  .compass {
    width: 266px;
    height: 266px;
    background-image: url(@/static/img/top/compass.png);
    position: relative;
    background-size: cover;

    .compass-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: compassAnimation 38s linear infinite;
      will-change: transform;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .rate-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #ffeaa8;
      font-size: 18px;
    }

    .compass-center {
      width: 198px;
      height: 198px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .compass-numbers {
      span {
        position: absolute;
        font-size: 10px;
        color: #fff;
        user-select: none;

        &:nth-child(1) {
          top: 0;
          left: 50%;
          transform: translate(-50%, -100%);
        }
        &:nth-child(2) {
          top: 33px;
          right: 21px;
        }
        &:nth-child(3) {
          top: 133px;
          right: 0;
          transform: translateX(100%);
        }
        &:nth-child(4) {
          bottom: 15px;
          right: 26px;
        }
        &:nth-child(5) {
          left: 13px;
          bottom: 15px;
        }
        &:nth-child(6) {
          top: 133px;
          left: 0;
          transform: translateX(-100%);
        }
        &:nth-child(7) {
          top: 33px;
          left: 13px;
        }
      }
    }
  }

  .compass-info {
    margin-top: 19px;
    color: #fff;

    .compass-price {
      font-size: 12px;
    }

    .compass-price-text {
      margin-top: 6px;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.img-pointer {
  width: 16px;
  // height: 83px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) rotate(0deg);
  transform-origin: center bottom;
  will-change: transform;
  z-index: 2;

  &.animation {
    transition: transform cubic-bezier(0, 0, 0.05, 1) 6s;
  }
}

@keyframes compassAnimation {
  0% {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(0deg);
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0.5;
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
</style>
